<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="提现明细">
	</u-navbar>
	<view class="padding-30rpx white-bg">
		<view class="flex-jc-s-b" style="padding-bottom: 10px;font-size: 14px;border-bottom: 1px solid rgba(0,0,0,0.1);">
			<text style="font-weight: bold;" :user-select="true">提现单号：{{data.info.num}}</text>
      <text style="color: #333333" v-if="data.info.statusCode === 'normal' && data.info.completeFlag === 0">提现中</text>
      <text style="color: #409EFF" v-if="data.info.statusCode === 'normal' && data.info.completeFlag === 1">提现成功</text>
      <text style="color: #F87168" v-if="data.info.statusCode === 'exception'">提现失败</text>
		</view>
		<view class="item-content" style="padding-top: 15px">
			<text class="label-text">提现金额</text>
			<text class="value-text">{{data.info.price}}元</text>
		</view>
		<view class="item-content">
			<text class="label-text">提现时间</text>
			<text class="value-text">{{data.info.submitTime}}</text>
		</view>
		<view v-if="data.info.completeFlag === 1" class="item-content">
			<text class="label-text">到账时间</text>
			<text class="value-text">{{data.info.completeTime}}</text>
		</view>
		<view class="item-content" style="padding-bottom: 0">
			<text class="label-text">提现账户</text>
			<text class="value-text">{{data.info.withdrawalAccount}}</text>
		</view>
    <view>
      <text></text>
    </view>
	</view>
  <view v-if="data.info.statusCode === 'exception'" class="flex-center" style="margin-top: 15px" @click="showServerDialog">
    <text class="value-text" style="color: #999999;border-bottom: 1px solid rgba(0,0,0,0.1);">联系客服</text>
  </view>
  <!-- 联系客服 -->
  <server ref="serverRef"></server>
</template>

<script setup>
	import { ref, reactive } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import {withdrawalDetailApi} from './const'
  import server from '../setting/components/server.vue'
  const serverRef = ref('')
  const data = reactive({
		show: false,
    info: {},
	})
  onLoad((options) => {
    initInfo(options.id)
  })

  const initInfo = (id) => {
    withdrawalDetailApi(id).then((res) => {
      data.info = res.data
    })
  }
  const showServerDialog = () => {
    serverRef.value.show = true
  }

</script>

<style lang="scss" scoped>
  .item-content {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
  }
	.label-text {
		color: #666666;
		margin-right: 16px;
    font-weight: 400;
    font-size: 14px;
    font-family: "PingFang SC",sans-serif;
	}
  .value-text {
    color: #333333;
    font-weight: 400;
    font-size: 14px;
    font-family: "PingFang SC",sans-serif;
  }
</style>
